<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	<div class="newList-page">
			<div class="new-ad" v-if="adList.length > 0">
				<u-swiper
					keyName="newsImage"
					:list="adList"
					showTitle
					height="321rpx"
					@click="clickAD"
					indicator
					indicatorMode="line"
				></u-swiper>
			</div>
			
			<div class="new-block" style="background: #fff;">
				<u-tabs :list="classList" keyName="className" @click="changeClass" 
				lineWidth="0" lineColor="#fff"
				:activeStyle="{color: '#fff' ,'font-size': '22rpx','padding':'0 8px','background': '#FF5E01','border-top-left-radius': '16rpx','border-top-right-radius': '16rpx'}" 
				:inactiveStyle="{color: '#8B8B8B' ,'font-size': '22rpx'}"></u-tabs>
			</div>
			
			<div class="con-list-div new-block">
				<div class="new-block-item" v-for="item in list" :key="item.newsId" @click="toInfo(item)">
					<div class="new-img">
						<img :src="item.newsImage" style="width:100%;height:100%;object-fit: contain;"/>
					</div>
					<div class="new-info">
						<div class="new-title">{{item.newsTitle}}</div>
						<div class="new-sub-title">{{item.newsWords}}</div>
						<div class="new-time">
							<img src="https://pic.moresu.com/FvRHG8lTvR-fQsAY7hMspuG2Th-4" style="width:19rpx;height:19rpx;margin-right:10rpx">
							<span style="margin-left:10rpx">{{item.createdAt}}</span>
						</div>
					</div>
				</div>
			</div>
			<div style="padding-bottom:40rpx;padding-top:40rpx">
			   <u-loadmore :status="status" ></u-loadmore>
			</div>
	</div>
	
	
	
	
	
	
  </div>
</template>

<script>
 import {getNewsList,pageSeo} from '@/config/api.js';
  import store from '@/store';
  const log = require('@/plugins/log.js');
  export default {
    components: {
     

    },
    data() {
      return {
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		keywords: "", //关键词搜索
		count:0,
		adList:[],
		classList:[],
		newsClassId:'',
	    sourceFrom:'',
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
		this.count = 0
		this.list = []
		this.clearData();
		this.getList()
		this.getAdlist()
		this.getClassList()
		this.sourceFrom=options.from?options.from:'';
    },
	
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'newsListPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif
		
	},

	onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},
	
	
    methods: {
		getAdlist(){
			 let data = {}
			 data.isHot =  1
		     data.newsType =  'INDUSTRY_NEWS'
		     data.pageNum =  1
		     data.pageSize =  3
			 this.adList = []
			getNewsList(data).then((res)=>{
				res.list.forEach((el)=>{
					this.adList.push({
						newsId:el.newsId,
						newsImage:el.newsImage,
						title:el.newsTitle
					})
				})
			})
		},
		clickAD(index){
			let item = this.adList[index]
			this.toInfo(item)
		},
		getClassList(){
			let data = {}
			 data.newsType =  'INDUSTRY_NEWS'
			 data.pageNum =  1
			 data.pageSize =  99
			getNewsList(data).then((res)=>{
				this.classList = res.class
				this.classList.unshift({classId:'',className:'全部'})
			})
		},
		
		changeClass(item){
			this.newsClassId = item.classId
			this.searchList()
		},
		
		
		
		toInfo(item){
			let text='';
			if(item.title){
				text='市场资讯&'+item.title;
			}else if(item.newsTitle){
				text='市场资讯&'+item.newsTitle;
			}
			if(this.sourceFrom=='card'){
				log.info(text);
			}
			uni.navigateTo({
			  url: '/pagesCommon/newInfo?newsId='+item.newsId
			})
		},
		
		
		searchList(){
			this.clearData();
			this.getList()

		},
		
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.count = 0;
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			data.newsClassId = this.newsClassId
			data.isRecommend =  ''
			data.isHot = ''
			data.newsType = 'INDUSTRY_NEWS'
			data.title = '' 
			this.status = 'loading';
		    return	getNewsList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		
	}
	

  }
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';
.newList-page{
	
	.new-ad{
		height:321rpx;
		margin-bottom:16rpx;
	}
	.new-block{
		margin-bottom: 16rpx;
		
		.new-block-item{
			padding:24rpx;
			background: #fff;
			border-bottom:1px solid #eee;
			@include flexbox(flex-start,center);
			.new-img{
				width: 282rpx;
				height: 158rpx;
				border-radius: 18rpx;
				overflow: hidden;
				border:1px solid #eee
			}
			.new-info{
				padding-left:18rpx;
				width:calc(100% - 282rpx);
				.new-title{
					font-size: 26rpx;
					color: #000000;
					@include textoverflow(1)
				}
				.new-sub-title{
					font-size: 24rpx;					
					color: #8B8B8B;
					@include textoverflow(2);
					margin-top:10rpx;
				}
				.new-time{
					@include flexbox(flex-start,center);
					font-size: 24rpx;
					color: #8B8B8B;
					margin-top:10rpx;
				}
			}
		}
		.new-block-item:last-child{
			border-bottom:0
		}
	}
}


</style>